<template>
	<div class="overflow-hidden">
		<n-card class="box-card h-full rounded-8px shadow-sm" :bordered="false">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-button type="primary" @click="addEditRef.saveDept()">
							<icon-ic-round-plus class="mr-4px text-10px"/>
							新增
						</n-button>
						<n-button @click="handlerDefaultExpandAll()">
							展开/折叠
						</n-button>
					</n-space>
					<n-space>
						<n-button size="small" type="primary" @click="initData">
							<icon-mdi-refresh class="mr-4px text-16px"/>
							刷新表格
						</n-button>
					</n-space>
				</n-space>
				<el-table
					:data="tableData"
					v-loading="loading"
					style="width: 100%; margin-bottom: 20px"
					row-key="id"
					border
					:key="treeKey"
					:default-expand-all="defaultExpandAll"
				>
					<el-table-column prop="name" label="部门名称" sortable/>
					<el-table-column prop="weight" label="排序" sortable/>
					<el-table-column prop="createTime" label="创建时间" sortable/>
					<el-table-column label="操作">
						<template #default="{row}">
							<n-space>
								<n-button type="primary" @click="addEditRef.saveDept(row)" text class="text-15px">
									<icon-ep-plus/>
									新增
								</n-button>
								<n-button type="primary" @click="addEditRef.editDept(row)" text class="text-15px">
									<icon-ep-edit-pen/>
									编辑
								</n-button>
								<n-popconfirm
									@positive-click="confirmEvent(row.id)"
								>
									<template #trigger>

										<n-button type="error" text class="text-15px">
											<icon-ic-round-delete/>
											删除
										</n-button>
									</template>
									你确定要删除吗?
								</n-popconfirm>
							</n-space>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<AddEdit ref="addEditRef" @fetch-data="initData" :initSelectData="tableData"/>
		</n-card>
	</div>

</template>

<script setup>
import {reactive, toRefs, ref, onMounted} from 'vue';
import {getDeptTableTree, deleteDept} from '@/service';
import {useMessage} from 'naive-ui'
import AddEdit from './components/addEdit.vue'

const msg = useMessage()

const addEditRef=ref(null);

const state = reactive({
	loading: false,
	tableData: [],
	options: [],
	defaultExpandAll: true,
	treeKey: ''
})

const
	{
		loading,
		tableData,
		options,
		defaultExpandAll,
		treeKey
	} = toRefs(state)

const handlerDefaultExpandAll = () => {
	//这个treeKey是用来处理 展开/关闭不生效的
	state.treeKey = +new Date();
	if (state.defaultExpandAll) {
		state.defaultExpandAll = false;
	} else {
		state.defaultExpandAll = true
	}
}


// 确认框删除
const confirmEvent = async (deptId) => {
	const {data} = await deleteDept(deptId)
	resultTableInit(data)
}

const resultTableInit = (data) => {
	if (!data) {
		msg.error("处理失败")
	} else {
		msg.success("处理成功");
	}
	initData();
}


onMounted(() => {
	initData();
})

const initData = () => {
	state.loading = true
	setTimeout(async () => {
		const {data} = await getDeptTableTree();
		state.tableData = data;
		state.loading = false;
	}, 1000)
}


</script>
